<html>
<head>
<link rel="stylesheet" type="text/css" href="/styles/map.css" />
<style type="text/css">

body {
	margin: 0px;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;

	cursor: default;
}

@media screen and (max-width: 479px)
{
svg.canvas {
	-webkit-transform: rotate(90deg);
}
}
@media screen and (min-width: 480px)
{
}

@m edia screen and (max-width: 479px)
{
sv g.canvas {
	wi dth: 320px;
	he ight: 480px;
	background-color: black;
	-webkit-transform: rotate(90deg); 	
}
}
@m edia screen and (min-width: 480px)
{
sv g.canvas {
	width: 480px;
	height: 320px;
	background-color: black;
}
}

svg.canvas {
	width: 480px;
	height: 320px;
	background-color: black;
}

.hud {
	stroke-width: 5px;
	stroke: gold;
	fill: gold;
}
.hud text {
	font-family: Sans-serif;
}
.hud .button {
	st roke: gold;
	fi ll: gold;
}
.hud .button text {
	text-anchor: middle;
	dominant-baseline: central;
	font-size: 22;
	stroke-width: 2px;
}
.hud .button:hover {
	stroke: red;
	fill: red;
}
.hud .button circle {
	stroke-width: 5px;
	fill: black;
}
.hud .menu {
	visibility: hidden;
	fill-opacity: 0.75;
}
.hud .menu rect {
	stroke-width: 5px;
	fill: black;
}
.hud .menu text.title {
	text-anchor: middle;
	dominant-baseline: central;
	font-size: 22;
	stroke-width: 2px;
}
.hud .menu text.input {
	text-anchor: middle;
	dominant-baseline: central;
	font-size: 22;
	stroke-width: 2px;
}
.hud .menu text.message {
	dominant-baseline: central;
	font-size: 22;
	stroke-width: 1px;
}
.hud .menu text[editable='true']:focus {
	stroke: yellow;
}

g.area {
	fill: white;
	stroke: gray;
	stroke-width: 2px;
}
g.area:hover {
	stroke: red;
}
g.area text {
	text-anchor: middle;
	dominant-baseline: central;
}
g.area.selected {
	stroke: green;
}

g.lanes {
	stroke: green;
}
g.lanes.selected {
	stroke: green;
}
g.lane {
	fill: gray;
	stroke: gray;
	stroke-width: 2px;
}
g.lane text {
	text-anchor: middle;
	dominant-baseline: central;
}

.player0 {
	stroke: gray;
}
.player1 {
	stroke: blue;
}
.player2 {
	stroke: red;
}

</style>
<script type="text/javascript" src="/scripts/dom.js"></script>
<script type="text/javascript" src="/scripts/ajax.js"></script>
<script type="text/javascript" src="/scripts/svgbase.js"></script>
<script type="text/javascript" src="/scripts/map2.js"></script>
<script type="text/javascript">

function loadGames(init) {
	ajaxRequest("listgames.jsp", function(games, status) {
		if (status != 200) return;

		var selectedGame = document.getElementById("selectedGame");
		for (var i = 0; i < games.length; ++i) {
			var game = games[i];
			selectedGame.add(buildOption(game.name, game.id), null);
		}

		if (init) loadSelectedGame();		
	});
}
function loadSelectedGame() {
	var selectedGame = document.getElementById("selectedGame");

	loadGame(selectedGame.value);
}

function addToSet(set, value) {
	var result = set;
	var values = set.split(" ");
	var isnew = true;
	for (var i = 0; i < values.length; ++i) {
		if (value == values[i]) {
			isnew = false;
		}
	}
	if (isnew) {
		result += " "+ value;
	}
	return result.trim();
}
function removeFromSet(set, value) {
	var result = "";
	var values = set.split(" ");
	for (var i = 0; i < values.length; ++i) {
		if (value != values[i]) {
			result += " "+ values[i];
		}
	}
	return result.trim();
}
function test() {
	var x = "";
	if (addToSet("", "x") == "x") x += "1";
	if (addToSet("x", "x") == "x") x += "2";
	if (addToSet("a b", "x") == "a b x") x += "3";
	if (addToSet("a b x", "x") == "a b x") x += "4";
	if (removeFromSet("a b x", "x") == "a b") x += "5";
	if (removeFromSet("a b", "x") == "a b") x += "6";
	if (removeFromSet("x", "x") == "") x += "7";
	if (removeFromSet("", "x") == "") x += "8";
	if (x != "") alert(x);
}

function GameState() {
	this.selected;
	this.clickArea = function(area) {
		// Select
		if (!this.selected) {
			this.selected = area;

			var areasvg = area.areasvg;
			var classes = areasvg.getAttributeNS (null, 'class');
			areasvg.setAttributeNS (null, 'class', addToSet(classes, "selected"));

			var lanessvg = area.lanessvg;
			var classes = lanessvg.getAttributeNS (null, 'class');
			lanessvg.setAttributeNS (null, 'class', addToSet(classes, "selected"));

			return;
		}
		if (this.selected == area) {
			this.selected = null;

			var areasvg = area.areasvg;
			var classes = areasvg.getAttributeNS (null, 'class');
			areasvg.setAttributeNS (null, 'class', removeFromSet(classes, "selected"));

			var lanessvg = area.lanessvg;
			var classes = lanessvg.getAttributeNS (null, 'class');
			lanessvg.setAttributeNS (null, 'class', removeFromSet(classes, "selected"));

			return;
		}

		// Move
		if (this.selected && this.selected != area) {
			actionMove(this.selected.name, area.name, 1);
		}

		// Build
	}
}
function actionMove(from, to, force) {
	var id = getGameId();
	var url = "actionmove.jsp?id=" + id +"&from="+ from +"&to="+ to +"&force="+ force;
	ajaxRequest(url, function(game, status, message) {
		if (status != 200) {
			alert(status +" "+ message);
			return;
		}

		var game = wrapGame(game);
		var map  = wrapMap(game.map);

		updateMap(game, map);
	});
}
function actionBuild(area) {
	var id = getGameId();
	var url = "actionmove.jsp?id=" + id +"&from="+ from +"&to="+ to +"&force="+ force;
	ajaxRequest(url, function(game, status, message) {
		if (status != 200) {
			alert(status +" "+ message);
			return;
		}

		var game = wrapGame(game);
		var map  = wrapMap(game.map);

		updateMap(game, map);
	});
}

function getGameId() {
	var gameId = document.getElementById("gameId");
	if (gameId == null) return;

	return gameId.value;
}
function setGameId(id) {
	var gameId = document.getElementById("gameId");
	if (gameId == null) return;

	gameId.value = id;
}


var state = new GameState();

function clickArea(area) {
	state.clickArea(area);
}

function endTurn() {
	var id = getGameId();
	var url = "endturn.jsp?id="+ id;
	ajaxRequest(url, function(json) {
	});
}

function Viewport(w, h) {
	this.w = w;
	this.h = h;

	this.getX = function(map, s) {
		return s * map.width / w;
	}
	this.getY = function(map, t) {
		return t * map.height / h;
	}
	this.getS = function(map, x) {
		return x / map.width * w;
	}
	this.getT = function(map, y) {
		return y / map.height * h;
	}
}
var theViewport = null;
function getViewport() {
	if (!theViewport) theViewport = new Viewport(480, 320);
	return theViewport;
}

function wrapGame(game) {
	if (game == null) return;

	game.getPlayer = function(name) {
		var players = this.players;
		for (var i = 0; i < players.length; ++i) {
			var player = players[i];
			if (player.name == name) return player;
		}
		return null;
	}
	game.getPlayerId = function(name) {
		var players = this.players;
		for (var i = 0; i < players.length; ++i) {
			var player = players[i];
			if (player.name == name) return i;
		}
		return 0;
	}

	return game;
}
function wrapMap(map) {
	if (map == null) return;

	map.getArea = function(name) {
		var areas = this.areas;
		for (var i = 0; i < areas.length; ++i) {
			var area = areas[i];
			if (area.name == name) return area;
		}
		return null;
	}

	return map;
}
function wrapArea(area) {
	if (area == null) return;

	area.setForce = function(force) {}
	area.setOwner = function(owner) {}

	return area;	
}

function loadGame(id) {
	var url = "getgame.jsp";

	if (id != null) {
		url += "?id="+ id;
	}

	ajaxRequest(url, function(game) {
		var game = wrapGame(game);
		var map  = wrapMap(game.map);

//		gameId.value = game.id;
		setGameId(game.id);
		updateMap(game, map);
	});
}
var theMap;
function getMap() {
	if (!theMap) {
		theMap = new Map();
		document.body.appendChild(theMap.svgCanvas);
	}
	return theMap;
}
function Map() {
	this.svgCanvas = createCanvas();
	this.svgMap    = createMap(this.svgCanvas, 100, 100);
	this.svgLanes  = createLanes(this.svgMap);
	this.svgAreas  = createAreas(this.svgMap);
	this.svgHud    = createHud(this.svgCanvas);
}

function createCanvas() {
	var svgCanvas = document.createElementNS (SVG, "svg");
//	svgCanvas.setAttributeNS (null, 'viewBox', "0 0 480 320");
//	svgCanvas.setAttributeNS (null, 'viewBox', "0 0 100 100");
//	svgCanvas.setAttributeNS (null, 'viewBox', "0 0 "+ width +" "+ height);
//	svgCanvas.setAttributeNS (null, 'width', "480px");
//	svgCanvas.setAttributeNS (null, 'height', "320px");
	svgCanvas.setAttributeNS (null, 'class', "canvas");
	return svgCanvas;
}
function createMap(svgCanvas, width, height) {
	var svgMap = document.createElementNS (SVG, "svg");
//	svgMap.setAttributeNS (null, 'viewBox', "0 0 480 320");
//	svgMap.setAttributeNS (null, 'viewBox', "0 0 100 100");
	svgMap.setAttributeNS (null, 'viewBox', "0 0 "+ width +" "+ height);
	svgMap.setAttributeNS (null, 'class', "map");
	svgCanvas.appendChild(svgMap);
	return svgMap;
}
function createAreas(svgMap) {
	var svgAreas = document.createElementNS (SVG, "g");
	svgAreas.setAttributeNS (null, 'class', "areas");
	svgMap.appendChild(svgAreas);
	return svgAreas;
}
function createLanes(svgMap) {
	var svgLanes = document.createElementNS (SVG, "g");
	svgLanes.setAttributeNS (null, 'class', "lanes");
	svgMap.appendChild(svgLanes);
	return svgLanes;
}
function createHud(svgCanvas) {
	var svgHUD = buildHUD();
	svgCanvas.appendChild(svgHUD);
	return svgHUD;
}

function updateMap(game, map) {
	removeAllChildrenOfNode(getMap().svgAreas);
	removeAllChildrenOfNode(getMap().svgLanes);

	var areas = map.areas;
	for (var i = 0; i < areas.length; ++i) {
		var area = areas[i];

		getMap().svgAreas.appendChild(createArea(game, area));
		getMap().svgLanes.appendChild(buildLanes(game, map, area));
	}
}
function buildLanes(game, map, area) {
	var g = document.createElementNS (SVG, "g");

	var targets = area.targets;
	for (var i = 0; i < targets.length; ++i) {
		var targetName = targets[i];
		var target = map.getArea(targetName);
		if (target == null) continue;

		g.appendChild(createLane(game, area, target));
	}

	area.lanessvg = g;
	return g;
}
function buildHUD() {
//	var hud = document.createElementNS (SVG, "g");
	var hud = document.createElementNS (SVG, "svg");
	hud.setAttributeNS (null, 'x', "0px");
	hud.setAttributeNS (null, 'y', "0px");
	hud.setAttributeNS (null, 'viewBox', "-240 -160 480 480");
//	hud.setAttributeNS (null, 'width', "100%");
//	hud.setAttributeNS (null, 'height', "100%");
	hud.setAttributeNS (null, 'width', "480px");
	hud.setAttributeNS (null, 'height', "480px");
	hud.setAttributeNS (null, 'preserveAspectRatio', "xMaxYMin meet");
	hud.setAttributeNS (null, 'class', "hud");

	hud.appendChild(buildButton("mnu_button",-200,-120, 30, "MNU", function() { toggleMenu("mnu_menu", "mnu_button"); }));
	hud.appendChild(buildButton("sta_button",-200, -40, 30, "STA", function() { toggleMenu("sta_menu", "sta_button"); }));
	hud.appendChild(buildButton("set_button",-200,  40, 30, "SET", function() { toggleMenu("set_menu", "set_button"); }));
	hud.appendChild(buildButton("msg_button",-200, 120, 30, "MSG", function() { toggleMenu("msg_menu", "msg_button"); }));

	hud.appendChild(buildButton("bbb_button", 200,-120, 30, "REZ"));
	hud.appendChild(buildButton("ccc_button", 200, -40, 30, "+"));
	hud.appendChild(buildButton("ddd_button", 200,  40, 30, "-"));
	hud.appendChild(buildButton("end_button", 200, 120, 30, "END", endTurn));

	hud.appendChild(buildHUDMain());
	hud.appendChild(buildHUDStatus());
	hud.appendChild(buildHUDSettings());
	hud.appendChild(buildHUDMessages());

	return hud;
}
function buildHUDMain() {
	var menu = buildHUDMenu("mnu_menu", "MENU");
	menu.appendChild(buildButton2("x_button", 0,-40, 30, "New Game"));
	menu.appendChild(buildButton2("y_button", 0, 40, 30, "List Games"));
	return menu;
}
function buildHUDStatus() {
	var menu = buildHUDMenu("sta_menu", "STATUS");
	menu.appendChild(buildText2(-150, -40, "Phear"));
	menu.appendChild(buildText2(-150,   0, "Aaron"));
	menu.appendChild(buildText2(-150,  40, "Aeryn"));
	menu.appendChild(buildText2(-150,  80, "Aegon"));
	menu.appendChild(buildText2(-150, 120, "Aefyn"));

	menu.appendChild(buildButton("up_button", 200,-120, 30, "A"));
	menu.appendChild(buildButton("dn_button", 200, 120, 30, "V"));
	return menu;
}
function buildHUDSettings() {
	var menu = buildHUDMenu("set_menu", "SETTINGS");
	menu.appendChild(buildText(0, -40, "X"));
	menu.appendChild(buildText(0,   0, "X"));
	menu.appendChild(buildText(0,  40, "X"));
	menu.appendChild(buildText(0,  80, "X"));
	menu.appendChild(buildText(0, 120, "X"));
	return menu;
}
function buildHUDMessages() {
	var menu = buildHUDMenu("msg_menu", "MESSAGES");
	menu.appendChild(buildLine(-150, -100, 150, -100));
	menu.appendChild(buildText2(-150, -80, "Aeryn: Zigge zagge", "message"));
	menu.appendChild(buildText2(-150, -40, "Aaron: Boopa doo",   "message"));
	menu.appendChild(buildText2(-150,   0, "Phear: Bar foo!",    "message"));
	menu.appendChild(buildText2(-150,  40, "Aaron: Boopie doo",  "message"));
	menu.appendChild(buildText2(-150,  80, "Phear: Foo bar!",    "message"));

	menu.appendChild(buildRoundedRect(-150, 100, 300, 40, 10, ""));
	var text = buildText2(0, 120, "Text", "input");
	text.setAttributeNS (null, 'editable', 'true');
	menu.appendChild(text);
	menu.appendChild(document.createElement("input"));

	menu.appendChild(buildButton("up_button", 200,-120, 30, "A"));
	menu.appendChild(buildButton("dn_button", 200, 120, 30, "V"));
	return menu;
}
function buildHUDMenu(id, title) {
	var stat = document.createElementNS (SVG, "g");
	stat.setAttributeNS (null, 'class', "menu");
	stat.setAttributeNS (null, 'id', id);

	stat.appendChild(buildRoundedRect(-240, -160, 480, 320, 40, ""));
	stat.appendChild(buildText2(0, -120, title, "title"));
	return stat;
}

function buildButton(id, x, y, r, text, action) {
	var button = document.createElementNS (SVG, "g");
	button.setAttributeNS (null, 'id', id);
	button.setAttributeNS (null, 'class', "button");
	button.appendChild(buildCircle(x, y, r, ""));
	button.appendChild(buildText(x, y, text, ""));
	if (action) button.onclick = action;
	return button;
}
function buildButton2(id, x, y, r, text, action) {
	var button = document.createElementNS (SVG, "g");
	button.setAttributeNS (null, 'id', id);
	button.setAttributeNS (null, 'class', "button");
	button.appendChild(buildRoundedRect(x-150, y-30, 300, 60, r, ""));
	button.appendChild(buildText(x, y, text, ""));
	if (action) button.onclick = action;
	return button;
}

function buildText2(x, y, msg, cls, style) {
	var text = buildText(x, y, msg, style)
	if (cls != null) text.setAttributeNS (null, 'class', cls);
	return text;
}

function toggleMenu(menu_id, button_id) {
	var menu = document.getElementById(menu_id);
	var button = document.getElementById(button_id);
	if (!menu) return;
	if (!button) return;

	var visible = toggleVisible(menu);
	if (visible) {
		toFront(menu);
		toFront(button);
	} else {
		toBack(menu);
		toBack(button);
	}
}

function toFront(element) {
	if (!element) return;

	element.parentNode.appendChild(element);
}
function toBack(element) {
	if (!element) return;

	element.parentNode.insertBefore(element, element.parentNode.firstChild);
}
function toggleVisible(element) {
	if (!element) return;

	if (element.style.visibility != "visible") {
		element.style.visibility = "visible";
		return true;
	} else {
		element.style.visibility = "hidden";
		return false;
	}
}

function createArea(game, area) {
//	var color = Math.random()*360;

	var g = document.createElementNS (SVG, "g");
	g.setAttributeNS (null, 'class', "area player"+ game.getPlayerId(area.owner));
	g.setAttributeNS (null, 'transform', "translate("+area.x+" "+area.y+")");

	g.appendChild(buildCircle(0, 0, 7, ""));
	g.appendChild(buildText(0, 0, area.force, "font-family: Arial; font-size: 10; stroke: black; stroke-width: 1px"));

//	g.appendChild(buildCircle(-5, -5, 3, "stroke: transparent"));
//	g.appendChild(buildText(-5, -5, area.force, "font-family: Arial; font-size: 5; stroke: black; stroke-width: 1px"));
//
//	g.appendChild(buildCircle(5, -5, 3, "stroke: transparent"));
//	g.appendChild(buildText(5, -5, area.force, "font-family: Arial; font-size: 5; stroke: black; stroke-width: 1px"));
//
//	g.appendChild(buildCircle(-5, 5, 3, "stroke: transparent"));
//	g.appendChild(buildText(-5, 5, area.force, "font-family: Arial; font-size: 5; stroke: black; stroke-width: 1px"));
//
//	g.appendChild(buildCircle(5, 5, 3, "stroke: transparent"));
//	g.appendChild(buildText(5, 5, area.force, "font-family: Arial; font-size: 5; stroke: black; stroke-width: 1px"));

	var mlistener = buildCircle(0, 0, 10, "fill: transparent; stroke: transparent");
	mlistener.setAttributeNS (null, 'class', "mlistener");
	mlistener.setAttributeNS (null, 'name', area.name);
	mlistener.onclick = function() { clickArea(area); }
	g.appendChild(mlistener);

	area.areasvg = g;

	return g;
}
function createLane(game, area, target) {
	var ownerId = 0;
	if (area.owner == target.owner) {
		ownerId = game.getPlayerId(area.owner);
	}

	var g = document.createElementNS (SVG, "g");
	g.setAttributeNS (null, 'class', "lane player"+ ownerId);

	g.appendChild(buildLine(area.x, area.y, target.x, target.y, ""));

	var dx = target.x - area.x;
	var dy = target.y - area.y;
	var x = area.x + dx/2;
	var y = area.y + dy/2;

//	g.appendChild(buildCircle(x, y, 3, "stroke: transparent"));
//	g.appendChild(buildText(x, y, "+", "font-family: Arial; font-size: 5; stroke: black; stroke-width: 1px"));
	return g;
}

function init() {
	getViewport();
	getMap();
	loadGames(true);
}

window.onload = init;

</script>
</head>
<body>
<h1>Map 2</h1>
<select id="selectedGame"></select>
<button onclick="loadSelectedGame()">Load</button>

<input id="gameId"></input>
<ul id="gameData"></ul>

</body>
</html>
